<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
    <title>Responsive NFT Website</title>
</head>

<body>

    <nav>
        <a href="#" class="logo">AsmrProg</a>
        <div class="links">
            <a href="#">Home</a>
            <a href="#">Features</a>
            <a href="#">Blog</a>
            <a href="#">About Us</a>
        </div>
        <div class="login">
            <button class="signup">Get Started</button>
            <button>Login</button>
        </div>
    </nav>

    <header>
        <div class="left">
            <h1>Let's Buy Some <span>AsmrGraph</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, eaque harum. Nobis ipsam magni labore?
            </p>
            <a href="#">
                <i class='bx bx-basket'></i>
                <span>Buy Now</span>
            </a>
        </div>
        <img src="assets/header.png">
    </header>

    <h2 class="separator">
        Sell Your NFTs
    </h2>

    <div class="sell-nft">
        <div class="item">
            <div class="header">
                <i class='bx bx-wallet-alt'></i>
                <h5>Connect Wallet</h5>
            </div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste modi ab sunt dolores ex dolor, suscipit
                fuga sed earum.</p>
        </div>
        <div class="item">
            <div class="header">
                <i class='bx bx-cart-alt'></i>
                <h5>NFT Marketplace</h5>
            </div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste modi ab sunt dolores ex dolor, suscipit
                fuga sed earum.</p>
        </div>
        <div class="item">
            <div class="header">
                <i class='bx bx-grid-alt'></i>
                <h5>Launch DApps</h5>
            </div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste modi ab sunt dolores ex dolor, suscipit
                fuga sed earum.</p>
        </div>
    </div>

    <h2 class="separator">
        Super Hot NFTs
    </h2>

    <div class="nft-shop">
        <div class="category">
            <a href="#">AsmrGraph</a>
            <a href="#">Abstract</a>
            <a href="#">Monkey</a>
            <a href="#">Cars</a>
            <a href="#">Trending</a>
        </div>

        <div class="nft-list">
            <div class="item">
                <img src="assets/item-1.png">
                <div class="info">
                    <div>
                        <h5>CryptoArt</h5>
                        <div class="btc">
                            <i class='bx bxl-bitcoin'></i>
                            <p>0.29 BTC</p>
                        </div>
                    </div>
                    <p>5 of 33</p>
                </div>
                <div class="bid">
                    <p>2h 28m 1s</p>
                    <a href="#">Place a Bid</a>
                </div>
            </div>
            <div class="item">
                <img src="assets/item-2.png">
                <div class="info">
                    <div>
                        <h5>Abs-Art</h5>
                        <div class="btc">
                            <i class='bx bxl-bitcoin'></i>
                            <p>0.21 BTC</p>
                        </div>
                    </div>
                    <p>7 of 12</p>
                </div>
                <div class="bid">
                    <p>1h 28m 1s</p>
                    <a href="#">Place a Bid</a>
                </div>
            </div>
            <div class="item">
                <img src="assets/item-3.png">
                <div class="info">
                    <div>
                        <h5>TestArt</h5>
                        <div class="btc">
                            <i class='bx bxl-bitcoin'></i>
                            <p>0.21 BTC</p>
                        </div>
                    </div>
                    <p>9 of 23</p>
                </div>
                <div class="bid">
                    <p>4h 21m 1s</p>
                    <a href="#">Place a Bid</a>
                </div>
            </div>
            <div class="item">
                <img src="assets/item-4.png">
                <div class="info">
                    <div>
                        <h5>Art-4</h5>
                        <div class="btc">
                            <i class='bx bxl-bitcoin'></i>
                            <p>0.45 BTC</p>
                        </div>
                    </div>
                    <p>1 of 33</p>
                </div>
                <div class="bid">
                    <p>0h 28m 1s</p>
                    <a href="#">Place a Bid</a>
                </div>
            </div>
        </div>

    </div>

    <div class="view-more">
        <button>View More</button>
    </div>

    <h2 class="separator">
        Best Sellers
    </h2>

    <div class="sellers">
        <div class="item">
            <img src="assets/profile-1.png">
            <div class="info">
                <h4>Jhone D</h4>
                <p>15.2K</p>
            </div>
        </div>
        <div class="item">
            <img src="assets/profile-2.png">
            <div class="info">
                <h4>Gregory B</h4>
                <p>12.7K</p>
            </div>
        </div>
        <div class="item">
            <img src="assets/profile-3.png">
            <div class="info">
                <h4>Stephen E</h4>
                <p>7.9K</p>
            </div>
        </div>
        <div class="item">
            <img src="assets/profile-4.png">
            <div class="info">
                <h4>Russell M</h4>
                <p>4.2K</p>
            </div>
        </div>
    </div>

    <footer>
        <h3>Create, Explore & Collect Abstract NFTs</h3>
        <div class="right">
            <div class="links">
                <a href="#">Privacy Policy</a>
                <a href="#">Cooperation</a>
                <a href="#">Sponsorship</a>
                <a href="#">Contact Us</a>
            </div>
            <div class="social">
                <i class='bx bxl-instagram'></i>
                <i class='bx bxl-facebook-square'></i>
                <i class='bx bxl-github'></i>
            </div>
            <p>Copyright © 2024 AsmrProg, All Rights Reserved.</p>
        </div>
    </footer>

</body>

</html>